import React, { useState, useDebugValue } from 'react';

// useDebug 是用来调试自定义hooks里面的状态

// 自定义 Hook
function useMyMaxAge(maxAge) {
  const [ age, setAge ] = useState(0);

  // 延迟格式化，检查状态的值是否符合要求。
  useDebugValue(age, age => {
    return age>maxAge ? "年龄超了" :"还算正常" ;
  });

  const myAge = () => {
    setAge(age + 2);
  }

  return [ age, myAge ];
}

export default function App() {
  const [ count, setCount ] = useMyMaxAge(20);

  return (
    <div>
      <h1>useDebug</h1>
      年龄：{count}
      <button onClick={() => setCount()}>setCount</button>
    </div>
  )
}